import type { FC } from "react";
import QuestionInputConf, { QuestionInputPropsType } from "./QuestionInput";
import QuestionTitleConf, { QuestTitlePropsType } from "./QuestionTitle";
import QuestionParagraphConf, { QuestParagraphPropsType } from "./QuestParagraph";
import QuestionInfoConf, { QuestionInfoPropsType } from "./QuestionInfo";
import QuestTextAreaConf, { QuestionTextAreaType } from "./QuestTextArea";
import QuestionRadioConf, { QuestionRadioPropsType } from "./QuestionRadio";
import QuestionCheckConf, { QuestionCheckboxPropsType } from "./QuestionCheckbox";

export type ComponentPropsType = QuestionInputPropsType &
  QuestTitlePropsType &
  QuestParagraphPropsType &
  QuestionInfoPropsType &
  QuestionTextAreaType &
  QuestionRadioPropsType &
  QuestionCheckboxPropsType;

//统一组件的配置 type
export type ComponentConfigType = {
  title: string;
  type: string;
  Component: FC<ComponentPropsType>;
  PropComponent: FC<ComponentPropsType>;
  defaultProps: ComponentPropsType;
};
//全部组件配置的列表
const componentConfList: ComponentConfigType[] = [
  QuestionInputConf,
  QuestionTitleConf,
  QuestionParagraphConf,
  QuestionInfoConf,
  QuestTextAreaConf,
  QuestionRadioConf,
  QuestionCheckConf,
];

//组件分组
export const componentConfGroup = [
  {
    groupId: "text",
    groupName: "文本显示",
    components: [QuestionTitleConf, QuestionParagraphConf, QuestionInfoConf],
  },
  {
    groupId: "input",
    groupName: "用户输入",
    components: [QuestionInputConf, QuestTextAreaConf],
  },
  {
    groupId: "choose",
    groupName: "用户选择",
    components: [QuestionRadioConf, QuestionCheckConf],
  },
];

export function getComponentConByType(type: string) {
  return componentConfList.find((item) => item.type === type);
}
